<template>
  <div class="hello">
    <div>
      <el-select style="margin-right:15px;" v-model="selectValue" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button @click="proxy" type="primary">请求</el-button>
      <el-button @click="clear" type="primary">清空</el-button>
    </div>
    <div class="json">
      <p>这是什么？</p>
      <p>
        聚合分析。每个菜谱的schema有很多字段，但太多需要良好的分析才能看到效果，而有些字段 单凭一点却做不成表格，于是便把它们放在这里。
      </p>
      <p>
        在aggregations > stats_data下的数据均是该项数据的分析值。
      </p>
    </div>
    <div class="json" ref="jsonViewer">

    </div>
  </div>
</template>

<script>
import JSONFormatter from 'json-formatter-js';
import { proxyQuery } from '../api/elasticApi';
export default {
  name: 'HelloWorld',
  watch: {
    selectValue(newVal) {
      this.query.aggs.stats_data.stats.field = newVal;
    }
  },
  data() {
    return {
      selectValue: '',
      query: {
        size: 0,
        aggs: {
          stats_data: {
            stats: {
              field: 'cost_time'
            }
          }
        }
      },
      options: [
        {
          value: 'cost_time',
          label: '烹饪时间'
        },
        {
          value: 'fans',
          label: '粉丝数'
        },
        {
          value: 'ready_time',
          label: '准备时间'
        },
        {
          value: 'watch',
          label: '查看数'
        }
      ]
    };
  },
  methods: {
    clear() {
      this.$refs.jsonViewer.innerHTML = '';
    },
    proxy() {
      proxyQuery(this.query)
        .then(res => {
          const formatter = new JSONFormatter(res.data);
          // console.log(formatter.json);
          this.$refs.jsonViewer.appendChild(formatter.render());
        })
        .catch(err => {
          this.$notify.error({
            title: '错误',
            message: err
          });
        });
    }
  }
};
</script>

<style scoped lang="scss">
.json {
  text-align: left;
  padding: 8px 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 20px 0;
}
</style>
